import { Outlet, NavLink } from "react-router-dom"
import { useState, useEffect } from 'react'
import Fn from "../../components/Fn"
import Mask from "../../components/Mask"
import axios from 'axios'
function Home() {
    const [beixing, setBeixing] = useState([])
    const [wendu, setWendu] = useState([])
    const [tangdu, setTangdu] = useState([])
    const [kafeidou, setKafeidou] = useState([])
    useEffect(() => {
        axios.get(" http://localhost:3000/coffeeConf").then((res) => {
            setBeixing(res.data.beixing)
            setWendu(res.data.wendu)
            setTangdu(res.data.tangdu)
            setKafeidou(res.data.kafeidou)
        })
    }, [])
    return (
        <div>
            <div className='tabBox'>
                <div>
                    <h3>杯型</h3>
                    <Fn arr={beixing}></Fn>
                </div>
                <div>
                    <h3>温度</h3>
                    <Fn arr={wendu}></Fn>
                </div>
                <div>
                    <h3>咖啡豆</h3>
                    <Fn arr={kafeidou}></Fn>
                </div>
                <div>
                    <h3>糖度</h3>
                    <Fn arr={tangdu}></Fn>
                </div>
            </div>
            <Outlet></Outlet>
            <NavLink to="/xiang">去详情</NavLink>
            <Mask arr={[{ id: 1, name: "input" }, { id: 2, name: "button", val: "按钮" }]}></Mask>
        </div>
    )
}
export default Home